const HtmlWebpackPlugin=require('html-webpack-plugin')
const path=require('path')
module.exports={
  mode:'development',
  resolve:{
    alias:{
      MyUtils: path.resolve(__dirname, 'src/utils'),
      '@':path.resolve(__dirname,'src')
    }
  },
   devtool: 'inline-source-map',
    entry:path.resolve(__dirname,'src/main.js'),
    output: { // 出口
        path: path.resolve(__dirname, 'dist'),
        filename: 'app.js',
        clean: true // 先清空 dist，然后再输出最新内容
      },
      plugins:[
        new HtmlWebpackPlugin({
          template:path.resolve(__dirname,'public/index.html')
        })
      ],
      module:{
        rules:[
          {
            test:/\.css$/i,
            use:['style-loader','css-loader']
          },
          {
            test: /\.less$/i,
            use: [
              // compiles Less to CSS
              'style-loader',
              'css-loader',
              'less-loader',
            ],
          },
          { // 针对资源模块（图片，字体文件，图标文件等）处理
            test: /\.(png|jpg|jpeg|gif)$/i,
            type: 'asset', // 根据文件大小（8KB）小于：把文件转成 base64 打包进 js 文件中（减少网络请求次数）大于：文件复制到输出的目录下
            generator: { // 输出文件时，路径+名字
              filename: 'assets/[hash][ext]'
            }
          },
          {
            test: /\.m?js$/,
            exclude: /(node_modules|bower_components)/, // 排除指定目录里的 js （不进行编译降级）
            use: {
              loader: 'babel-loader',
              options: {
                presets: ['@babel/preset-env'] // 预设规则
              }
            }
          }
        ]
      }
}
